<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂扫码签到系统</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #2c3e50, #4a6491);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .tab-buttons {
            display: flex;
            background: #f1f5f9;
        }
        
        .tab-btn {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .tab-btn.active {
            background: white;
            border-bottom-color: #4299e1;
            color: #4299e1;
        }
        
        .tab-content {
            display: none;
            padding: 25px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 教师端样式 */
        .teacher-section {
            text-align: center;
        }
        
        .qrcode-container {
            margin: 25px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            display: inline-block;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        #qrcode {
            border: 1px solid #eee;
            padding: 10px;
            background: white;
        }
        
        .local-file-warning {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            background: #fff3cd;
            border-radius: 8px;
            border-left: 5px solid #ffc107;
            text-align: left;
        }
        
        .local-file-warning h3 {
            color: #856404;
            margin-bottom: 10px;
        }
        
        .local-file-warning ol {
            padding-left: 20px;
            margin: 10px 0;
        }
        
        .local-file-warning a {
            color: #007bff;
            text-decoration: none;
        }
        
        .attendance-stats {
            margin: 25px auto;
            padding: 20px;
            background: #f8fafc;
            border-radius: 10px;
            max-width: 600px;
        }
        
        .stats-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .stats-number {
            font-weight: bold;
            color: #2c5282;
        }
        
        .attendance-list {
            margin-top: 30px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 10px;
        }
        
        .student-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .student-item:nth-child(even) {
            background: #f8fafc;
        }
        
        .attendance-status {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        
        .present {
            background: #48bb78;
            color: white;
        }
        
        .absent {
            background: #f56565;
            color: white;
        }
        
        /* 学生端样式 */
        .student-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-title {
            text-align: center;
            margin-bottom: 25px;
            color: #2c5282;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
        }
        
        .submit-btn {
            width: 100%;
            padding: 14px;
            background: #4299e1;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .submit-btn:hover {
            background: #3182ce;
        }
        
        .success-message {
            text-align: center;
            padding: 20px;
            background: #f0fff4;
            border-radius: 8px;
            color: #2f855a;
            font-weight: bold;
            margin-top: 20px;
            display: none;
        }
        
        .wechat-tip {
            background: #fffaf0;
            border-left: 4px solid #dd6b20;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            color: #9c4221;
        }
        
        @media (max-width: 768px) {
            .header h1 {
                font-size: 22px;
            }
            
            .tab-btn {
                padding: 12px;
                font-size: 14px;
            }
            
            .tab-content {
                padding: 15px;
            }
            
            .student-form {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>课堂扫码签到系统</h1>
            <p>政治哲学课程 - 赵光勇</p>
        </div>
        
        <div class="tab-buttons">
            <div class="tab-btn active" onclick="showTab('teacher')">教师端</div>
            <div class="tab-btn" onclick="showTab('student')">学生端</div>
        </div>
        
        <!-- 教师端 -->
        <div id="teacher-tab" class="tab-content active">
            <div class="teacher-section">
                <h2>课堂签到二维码</h2>
                <div class="qrcode-container">
                    <div id="qrcode"></div>
                </div>
                
                <div id="local-warning" class="local-file-warning" style="display: none;">
                    <h3>⚠️ 本地文件限制提示</h3>
                    <p>检测到您正在本地运行此文件，由于浏览器安全限制，无法生成有效的签到二维码。</p>
                    <p><strong>解决方案：</strong></p>
                    <ol>
                        <li>将本文件上传到网络服务器（推荐使用Gitee Pages）</li>
                        <li>或使用以下临时方案：
                            <ul style="margin-left: 15px; margin-top: 5px;">
                                <li>教师手动记录学生签到</li>
                                <li>使用共享电子表格统计</li>
                            </ul>
                        </li>
                    </ol>
                    <p style="margin-top: 15px;">
                        <a href="https://gitee.com/help/articles/4136" target="_blank">Gitee Pages部署教程</a>
                    </p>
                </div>
                
                <div class="wechat-tip">
                    <p>学生使用微信扫描时，请长按二维码选择"识别图中二维码"</p>
                </div>
                
                <div class="attendance-stats">
                    <div class="stats-row">
                        <span>总人数：</span>
                        <span class="stats-number" id="total-count">57</span>
                    </div>
                    <div class="stats-row">
                        <span>已签到：</span>
                        <span class="stats-number" id="present-count">0</span>
                    </div>
                    <div class="stats-row">
                        <span>未签到：</span>
                        <span class="stats-number" id="absent-count">57</span>
                    </div>
                </div>
                
                <h3>签到名单</h3>
                <div class="attendance-list" id="attendance-list">
                    <!-- 签到名单将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 学生端 -->
        <div id="student-tab" class="tab-content">
            <div class="student-form">
                <h2 class="form-title">课堂签到</h2>
                <div class="form-group">
                    <label for="student-name">请输入您的姓名</label>
                    <input type="text" id="student-name" placeholder="例：张三">
                </div>
                <button class="submit-btn" onclick="submitCheckIn()">确认签到</button>
                
                <div class="success-message" id="success-message">
                    ✅ 签到成功！
                </div>
            </div>
        </div>
    </div>

    <script>
        // 学生名单 - 来自您的点名册
        const students = [
            { id: 1, studentId: '2023210301112', name: '林静语', class: '生科233', present: false },
            { id: 2, studentId: '2023210301121', name: '古丽米热·麦麦提伊敏', class: '生科234', present: false },
            { id: 3, studentId: '2023210814044', name: '陈昱佳', class: '思政232', present: false },
            { id: 4, studentId: '2023210902002', name: '梁晶晶', class: '经济231', present: false },
            { id: 5, studentId: '2023210902004', name: '陈梓恒', class: '经济231', present: false },
            { id: 6, studentId: '2023210902006', name: '江徐茹', class: '经济231', present: false },
            { id: 7, studentId: '2023210902009', name: '何柳炎', class: '经济231', present: false },
            { id: 8, studentId: '2023210902034', name: '林景栋', class: '经济231', present: false },
            { id: 9, studentId: '2023210902103', name: '袁彬', class: '经济233', present: false },
            { id: 10, studentId: '2023210902104', name: '蒋天宇', class: '经济233', present: false },
            { id: 11, studentId: '2023210902110', name: '纪安然', class: '经济233', present: false },
            { id: 12, studentId: '2023210902112', name: '吴奇祺', class: '经济233', present: false },
            { id: 13, studentId: '2023210902113', name: '郭少佳', class: '经济233', present: false },
            { id: 14, studentId: '2023210902114', name: '吴黄', class: '经济233', present: false },
            { id: 15, studentId: '2023210908001', name: '杨雨涵', class: '行管231', present: false },
            { id: 16, studentId: '2023210908002', name: '储欣雨', class: '行管231', present: false },
            { id: 17, studentId: '2023210908003', name: '叶晴', class: '行管231', present: false },
            { id: 18, studentId: '2023210908004', name: '姚景议', class: '行管231', present: false },
            { id: 19, studentId: '2023210908005', name: '黄婧华', class: '行管231', present: false },
            { id: 20, studentId: '2023210908006', name: '赵娅凤', class: '行管231', present: false },
            { id: 21, studentId: '2023210908008', name: '肖金凤', class: '行管231', present: false },
            { id: 22, studentId: '2023210908009', name: '程馨燕', class: '行管231', present: false },
            { id: 23, studentId: '2023210908011', name: '贺思美', class: '行管231', present: false },
            { id: 24, studentId: '2023210908013', name: '凌泽康', class: '行管231', present: false },
            { id: 25, studentId: '2023210908014', name: '许嘉璐', class: '行管231', present: false },
            { id: 26, studentId: '2023210908015', name: '曹刘', class: '行管231', present: false },
            { id: 27, studentId: '2023210908016', name: '刘妍熙', class: '行管231', present: false },
            { id: 28, studentId: '2023210908018', name: '段旭涛', class: '行管231', present: false },
            { id: 29, studentId: '2023210908019', name: '格松玉珍', class: '行管231', present: false },
            { id: 30, studentId: '2023210908020', name: '美合日班买买提努尔', class: '行管231', present: false },
            { id: 31, studentId: '2023210908021', name: '艾丽美合日·艾勒阿合', class: '行管231', present: false },
            { id: 32, studentId: '2023210908023', name: '姚何鑫', class: '行管231', present: false },
            { id: 33, studentId: '2023210908029', name: '谢依婷', class: '行管231', present: false },
            { id: 34, studentId: '2023210908034', name: '陈嘉炜', class: '行管231', present: false },
            { id: 35, studentId: '2023210908035', name: '吴芝锦', class: '行管231', present: false },
            { id: 36, studentId: '2023210908038', name: '王莉婷', class: '行管232', present: false },
            { id: 37, studentId: '2023210908040', name: '刘城', class: '行管232', present: false },
            { id: 38, studentId: '2023210908041', name: '苏昱博', class: '行管232', present: false },
            { id: 39, studentId: '2023210908042', name: '周甜甜', class: '行管232', present: false },
            { id: 40, studentId: '2023210908044', name: '张蓉蓉', class: '行管232', present: false },
            { id: 41, studentId: '2023210908045', name: '周思萌', class: '行管232', present: false },
            { id: 42, studentId: '2023210908049', name: '张伊含', class: '行管232', present: false },
            { id: 43, studentId: '2023210908050', name: '吴倩玉', class: '行管232', present: false },
            { id: 44, studentId: '2023210908051', name: '王子涵', class: '行管232', present: false },
            { id: 45, studentId: '2023210908052', name: '周雪', class: '行管232', present: false },
            { id: 46, studentId: '2023210908053', name: '袁玥', class: '行管232', present: false },
            { id: 47, studentId: '2023210908054', name: '其米多布态', class: '行管232', present: false },
            { id: 48, studentId: '2023210908055', name: '阿卜杜合力力·图拉尼', class: '行管232', present: false },
            { id: 49, studentId: '2023210908056', name: '孔奕煊', class: '行管232', present: false },
            { id: 50, studentId: '2023210908057', name: '裘淑仪', class: '行管232', present: false },
            { id: 51, studentId: '2023210908059', name: '王露缘', class: '行管232', present: false },
            { id: 52, studentId: '2023210908060', name: '赵焌妍', class: '行管232', present: false },
            { id: 53, studentId: '2023210908063', name: '孙心见', class: '行管232', present: false },
            { id: 54, studentId: '2023210908067', name: '俞诗琪', class: '行管232', present: false },
            { id: 55, studentId: '2023211301080', name: '张瀚之', class: '临床233', present: false },
            { id: 56, studentId: '2023211301083', name: '王宇清', class: '临床233', present: false },
            { id: 57, studentId: '2023213001009', name: '胡米楠', class: '思政232', present: false }
        ];

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否是本地文件
            const isLocalFile = window.location.protocol === 'file:';
            
            if (isLocalFile) {
                document.getElementById('local-warning').style.display = 'block';
            } else {
                // 生成二维码
                generateQRCode();
            }
            
            // 更新考勤显示
            updateAttendanceDisplay();
            
            // 检查是否是学生打卡请求
            checkIfCheckInRequest();
        });

        // 生成二维码
        function generateQRCode() {
            const classId = 'class_' + Date.now();
            const checkInUrl = window.location.href.split('?')[0] + '?action=checkin&class=' + classId;
            const canvas = document.getElementById('qrcode');
            
            QRCode.toCanvas(canvas, checkInUrl, {
                width: 200,
                margin: 2,
                color: { dark: '#000000', light: '#ffffff' }
            }, function(error) {
                if (error) {
                    console.error('生成二维码失败:', error);
                    canvas.innerHTML = `
                        <div style="padding: 15px; background: #f8d7da; border-radius: 5px; border-left: 4px solid #dc3545;">
                            <p style="color: #721c24;">二维码生成失败，请使用以下链接:</p>
                            <a href="${checkInUrl}" target="_blank" style="color: #007bff; word-break: break-all;">${checkInUrl}</a>
                        </div>
                    `;
                }
            });
        }

        // 更新考勤显示
        function updateAttendanceDisplay() {
            const attendanceList = document.getElementById('attendance-list');
            attendanceList.innerHTML = '';
            
            let presentCount = 0;
            
            students.forEach(student => {
                const studentElement = document.createElement('div');
                studentElement.className = 'student-item';
                studentElement.innerHTML = `
                    <span>${student.name} (${student.class})</span>
                    <span class="attendance-status ${student.present ? 'present' : 'absent'}">
                        ${student.present ? '已签到' : '未签到'}
                    </span>
                `;
                
                attendanceList.appendChild(studentElement);
                
                if (student.present) presentCount++;
            });
            
            // 更新统计数字
            document.getElementById('present-count').textContent = presentCount;
            document.getElementById('absent-count').textContent = students.length - presentCount;
            document.getElementById('total-count').textContent = students.length;
        }

        // 检查是否是学生打卡请求
        function checkIfCheckInRequest() {
            const urlParams = new URLSearchParams(window.location.search);
            const isCheckIn = urlParams.get('action') === 'checkin';
            
            if (isCheckIn) {
                // 显示学生打卡界面
                showTab('student');
                
                // 清除URL参数
                history.replaceState({}, '', window.location.pathname);
            }
        }

        // 学生提交打卡
        function submitCheckIn() {
            const studentName = document.getElementById('student-name').value.trim();
            
            if (!studentName) {
                alert('请输入您的姓名');
                return;
            }
            
            // 检查是否是名单中的学生
            const student = students.find(s => s.name === studentName);
            
            if (!student) {
                alert('未找到您的姓名，请确认输入是否正确');
                return;
            }
            
            // 记录打卡
            student.present = true;
            
            // 显示成功消息
            const successMsg = document.getElementById('success-message');
            successMsg.style.display = 'block';
            
            // 清空输入框
            document.getElementById('student-name').value = '';
            
            // 3秒后自动返回教师端（如果是教师在测试）
            setTimeout(() => {
                showTab('teacher');
                updateAttendanceDisplay();
                successMsg.style.display = 'none';
            }, 3000);
        }

        // 切换标签页
        function showTab(tabName) {
            // 隐藏所有标签页
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有按钮的活动状态
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 显示选中的标签页
            document.getElementById(tabName + '-tab').classList.add('active');
            
            // 设置按钮的活动状态
            event.target.classList.add('active');
            
            // 如果是教师端，更新考勤数据
            if (tabName === 'teacher') {
                updateAttendanceDisplay();
            }
        }
    </script>
</body>
</html>